<!DOCTYPE html>
<html>
<head>
    <title>平台管理</title>
    <#include "/header.html">
    <link
            href="${request.contextPath}/statics/plugins/jquery-layout/jquery.layout-latest.css"
            rel="stylesheet" />
</head>
<body>
<div id="rrapp" v-cloak>
    <div v-show="showList==1">
            <div class="container-div ui-layout-center" style="height:54px;padding: 10px 0">
            <div class="layui-col-md2" style="margin-right: 30px">
               <input type="text" class="form-control" v-model="q.beanName" placeholder="bean名称">
            </div>
            <div class="layui-col-md2" style="margin-right: 30px">
                 <input type="text" class="form-control" v-model="q.remark" placeholder="请输入备注相关信息进行检索">
            </div>
            <button id="schedule_search" ref="schedule_search" class="btn btn-default" @click="query">查询</button>
            <a class="btn btn-primary" @click="add"><i class="fa fa-plus"></i>&nbsp;新增</a>
            <a class="btn btn-primary" @click="copy"><i class="fa fa-copy"></i>&nbsp;复制</a>
            <a class="btn btn-primary" @click="update"><i class="fa fa-pencil-square-o"></i>&nbsp;修改</a>
            <a class="btn btn-primary" @click="del"><i class="fa fa-trash-o"></i>&nbsp;删除</a>
            <a class="btn btn-primary" @click="pause"><i class="fa fa-pause"></i>&nbsp;暂停</a>
            <a class="btn btn-primary" @click="resume"><i class="fa fa-play"></i>&nbsp;恢复</a>
            <a class="btn btn-primary" @click="runOnce"><i class="fa fa-arrow-circle-right"></i>&nbsp;立即执行</a>

            <!--<#if shiro.hasPermission("sys:schedule:log")>-->
            <!--<a class="btn btn-danger" style="float:right;" href="schedule_log.html">日志列表</a>-->
            <!--</#if>-->
            </div>
        <div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
            <ul class="layui-tab-title" style="left: 0;
            margin-bottom: 15px;
            border-bottom: none;">
                <li class="layui-this">自动</li>
                <li>手动</li>
            </ul>
            <div class="col-sm-12 select-info table-striped">
                <table id="bootstrap-table" data-mobile-responsive="true"></table>
            </div>

        </div>
    </div>

    <div v-show="showList==2" class="panel panel-default">
        <div class="panel-heading">{{title}}</div>
        <form class="form-horizontal">
            <div class="form-group">
                <div class="col-sm-2 control-label">bean名称</div>
                <div class="col-sm-10">
                    <input type="text" class="form-control" v-model="schedule.beanName" :readonly="isReadOnly"  placeholder="spring bean名称，如：testTask"/>
                </div>
            </div>
            <div class="form-group">
                <div class="col-sm-2 control-label">方法名称</div>
                <div class="col-sm-10">
                    <input type="text" class="form-control" v-model="schedule.methodName"  :readonly="isReadOnly" placeholder="方法名称"/>
                </div>
            </div>
            <div class="form-group">
                <div class="col-sm-2 control-label">参数</div>
                <div class="col-sm-10">
                    <textarea style="height: 120px;resize: none;" type="text" class="form-control" v-model="schedule.params" placeholder="参数"></textarea>

                </div>
            </div>
            <div class="form-group">
                <div class="col-sm-2 control-label">cron表达式</div>
                <div class="col-sm-10">
                    <input type="text" class="form-control" v-model="schedule.cronExpression" placeholder="如：0 0 12 * * ?"/>
                </div>
            </div>
            <div class="form-group">
                <div class="col-sm-2 control-label">备注</div>
                <div class="col-sm-10">
                    <input type="text" class="form-control" v-model="schedule.remark" placeholder="备注"/>
                </div>
            </div>
            <div class="form-group" >
                <div class="col-sm-2 control-label">启动模式</div>
                <div class="col-sm-10" id="radios" style="line-height: 35px;">
                    <div style="position:relative;display: inline-block;width: 60px;">
                        <input id="item1" type="radio" value="2" name="type" value="自动" checked>
                        <label for="item1">自动</label>
                    </div>
                    <div style="position:relative;display: inline-block;width: 60px">
                        <input id="item2" type="radio" value="1" name="type" value="手动">
                        <label for="item2">手动</label>
                    </div>
                </div>
            </div>
            <div class="form-group" v-show="!isReadOnly">
                <div class="col-sm-2 control-label">是否启动</div>
                <div class="col-sm-10" id="radios2" style="line-height: 35px;">
                    <div style="position:relative;display: inline-block;width: 60px">
                        <input id="item3" type="radio" value="2" name="start" value="启动" checked>
                        <label for="item3">启动</label>
                    </div>
                    <div style="position:relative;display: inline-block;width: 60px">
                        <input id="item4" type="radio" value="1" name="start" value="关闭">
                        <label for="item4">关闭</label>
                    </div>
                </div>
            </div>
            <div class="form-group">
                <div class="col-sm-2 control-label"></div>
                <input type="button" class="btn btn-primary" ref="schedule_submit" @click="saveOrUpdate" value="确定"/>
                &nbsp;&nbsp;<input type="button" class="btn btn-warning" @click="reload" value="返回"/>
            </div>
        </form>
    </div>
    <div v-show="showList==3" >
        <div class="grid-btn" style="height:54px;">
            <button id="retreat"  class="btn btn-warning" @click="retreat">返回</button>
        </div>
        <table id="bootstrap-table1" data-mobile-responsive="true"></table>
    </div>
</div>

<script>

    $(function () {
        //注意：选项卡 依赖 element 模块，否则无法进行功能性操作
        layui.use(['element','form'], function(){
            var element = layui.element;

            element.on('tab(docDemoTabBrief)', function(data){
                vm.nav_tabs = data.index==0?2:1;
                vm.query();
            });


            //…
        });
        $('#bootstrap-table')
            .bootstrapTable(
                {
                    method : 'post', // 服务器数据的请求方式 get or post
                    url : baseURL + 'baidujob/findBaiduScheduleJobPage', // 服务器数据的加载地址
                    showRefresh : true,
                    showToggle : true,
                    showColumns : true,
                    //showExport :true,
                    sortable: true,
                    sortName:"userId",// 排序列名称
                    sortOrder: "desc",
                    iconSize : 'outline',
                    toolbar : '#exampleToolbar',
                    striped : true, // 设置为true会有隔行变色效果
                    dataType : "json", // 服务器返回的数据类型
                    pagination : true, // 设置为true会在底部显示分页条
                    // queryParamsType : "limit",
                    // //设置为limit则会发送符合RESTFull格式的参数
                    singleSelect : false, // 设置为true将禁止多选
                    // contentType : "application/x-www-form-urlencoded",
                    // //发送到服务器的数据编码类型
                    pageSize : 10, // 如果设置了分页，每页数据条数
                    pageNumber : 1, // 如果设置了分布，首页页码
                    // search : true, // 是否显示搜索框
                    //showColumns : false, // 是否显示内容下拉框（选择显示的列）
                    sidePagination : "server", // 设置在哪里进行分页，可选值为"client" 或者
                    // "server"
                    queryParams : function(params) {
                        //console.log(params)
                        return {
                            // 说明：传入后台的参数包括offset开始索引，limit步长，sort排序列，order：desc或者,以及所有列的键值对
                            limit : params.limit,
                            page : (params.offset/params.limit) + 1,
                            beanName:vm.q.beanName,
                            jobType:vm.nav_tabs,
                            remark:vm.q.remark
                            // sidx: params.sort,      //排序列名
                            //order: params.order //排位命令（desc，asc）
                            /* sort:"userId",
                            order:"desc" */
                        };
                    },
                    // //请求服务器数据时，你可以通过重写参数的方式添加一些额外的参数，例如 toolbar 中的参数 如果
                    // queryParamsType = 'limit' ,返回参数必须包含
                    // limit, offset, search, sort, order 否则, 需要包含:
                    // pageSize, pageNumber, searchText, sortName,
                    // sortOrder.
                    // 返回false将会终止请求
                    columns : [
                        {
                            checkbox : true
                        },
                        {
                            field : 'jobId',
                            align:'center',
                            title : '任务ID'
                        },
                        {
                            field : 'beanName', // 列字段名
                            align:'center',
                            title : 'bean名称',// 列标题
                        },
                        {
                            field : 'methodName',
                            align:'center',
                            title : '方法名称'
                        },
                        {
                            field : 'params',
                            align:'center',
                            title : '参数'
                        },
                        {
                            field : 'cronExpression',
                            title : 'cron表达式',
                            align:'center'
                        },
                        {
                            field : 'remark',
                            title : '备注',
                            align:'center'
                        },
                        {
                            field : 'status',
                            title : '状态',
                            align:'center',
                            formatter: function(value, options, row){
                                return value === 0 ?
                                    '<span class="label label-success">正常</span>' :
                                    '<span class="label label-danger">暂停</span>';
                            }
                        },
                        {
                            title : '操作',
                            field : 'jobId',
                            width:330,
                            align : 'center',
                            formatter : function(
                                value, row,
                                index) {
                                //console.log(value);
                                return '<div class="btn btn-warning" onclick="info('+value+')">日志详情</div>';
                            }
                        } ]
                });
        $('#bootstrap-table').on('click-row.bs.table', function (e, row, element)
        {
            $(element).find("input").click();
            if($(element).hasClass("selectedTr")){
                $(element).removeClass("selectedTr");
            }else{
                $(element).addClass("selectedTr");
            }
            //console.log($(element).find("input"));
            // console.log(row);
            // console.log(e);
        });
});
    var winopen=function(text){
        layer.open({
            content:text
        });
    }
    function info(id){
        vm.showList = 3;
        vm.jId = id;
        $('#bootstrap-table1')
            .bootstrapTable(
                {
                    method : 'post', // 服务器数据的请求方式 get or post
                    url : baseURL + 'sys/scheduleLog/jobLog', // 服务器数据的加载地址
                    showRefresh : true,
                    showToggle : true,
                    showColumns : true,
                    //showExport :true,
                    sortable: true,
                    sortName:"userId",// 排序列名称
                    sortOrder: "desc",
                    iconSize : 'outline',
                    toolbar : '#exampleToolbar',
                    striped : true, // 设置为true会有隔行变色效果
                    dataType : "json", // 服务器返回的数据类型
                    pagination : true, // 设置为true会在底部显示分页条
                    // queryParamsType : "limit",
                    // //设置为limit则会发送符合RESTFull格式的参数
                    singleSelect : false, // 设置为true将禁止多选
                    // contentType : "application/x-www-form-urlencoded",
                    // //发送到服务器的数据编码类型
                    pageSize : 10, // 如果设置了分页，每页数据条数
                    pageNumber : 1, // 如果设置了分布，首页页码
                    // search : true, // 是否显示搜索框
                    //showColumns : false, // 是否显示内容下拉框（选择显示的列）
                    sidePagination : "server", // 设置在哪里进行分页，可选值为"client" 或者
                    // "server"
                    queryParams : function(params) {
                        return {
                            // 说明：传入后台的参数包括offset开始索引，limit步长，sort排序列，order：desc或者,以及所有列的键值对
                            limit : params.limit+'',
                            page : ((params.offset/params.limit) + 1)+'',
                            jobId:id
                        };
                    },
                    // //请求服务器数据时，你可以通过重写参数的方式添加一些额外的参数，例如 toolbar 中的参数 如果
                    // queryParamsType = 'limit' ,返回参数必须包含
                    // limit, offset, search, sort, order 否则, 需要包含:
                    // pageSize, pageNumber, searchText, sortName,
                    // sortOrder.
                    // 返回false将会终止请求
                    columns : [
                        {
                            field : 'logId',
                            align:'center',
                            title : '日志ID'
                        },
                        {
                            field : 'jobId',
                            align:'center',
                            title : '任务ID'
                        },
                        {
                            field : 'beanName', // 列字段名
                            align:'center',
                            title : 'bean名称',// 列标题
                        },
                        {
                            field : 'params', // 列字段名
                            align:'center',
                            title : '参数',// 列标题
                        },
                         {
                            field : 'status', // 列字段名
                            align:'center',
                            title : '状态',// 列标题
                            formatter: function(value, options, row){
                                return value === 0 ?
                                    '<span class="label label-success">成功</span>' :
                                    '<span class="label label-danger pointer" onclick="vm.showError('+row.logId+')">失败</span>';
                            }
                        },
                        {
                            field : 'times', // 列字段名
                            align:'center',
                            title : '耗时(单位：毫秒)',// 列标题
                        },
                        {
                            field : 'createTime', // 列字段名
                            align:'center',
                            title : '执行时间',// 列标题
                        },
                        {
                            field : 'error',
                            align:'center',
                            title : '报错',
                            formatter: function(value, options, row){
                                if(value){
                                    return '<div class="errors" onclick="winopen(\''+value+'\')">'+value+'</div>'
                                }else{
                                    return ''
                                }
                             }
                        }]
                });
        if(vm.bootstrapNum>1){
            vm.reloadLog();
        }
        vm.bootstrapNum ++ ;
    }
 var types = 2;
    var vm = new Vue({
        el:'#rrapp',
        data:{
            q:{
                beanName: null,
                remark:null
            },
            isDel:false,
            showList: 1,    //1是主页面 2是新增修改 3是日志
            title: null,
            bootstrapNum:1,
            jId:'',
            isReadOnly:null,
            schedule: {},
            nav_tabs:2,
            istype:2,
            isstart:2
        },

        methods: {
            retreat:function(){
                vm.showList = 1;
                vm.reload();
            },
            query: function () {
               vm.reload();
            },
            add: function(){
                vm.showList = 2;
                vm.title = "新增";
                vm.isReadOnly = null;
                vm.schedule = {};
                $('#radios :radio').eq(0).prop('checked','checked')
                $('#radios :radio').eq(1).removeAttr('checked')
                $('#radios2 :radio').eq(0).prop('checked','checked')
                $('#radios2 :radio').eq(1).removeAttr('checked')
            },
            copy:function(){
                var jobId = getSelectedRow();
                if(jobId == null){
                    return ;
                }
                $.get(baseURL + "sys/schedule/info/"+jobId.jobId, function(r){
                    vm.showList = 2;
                    vm.title = "新增";
                    vm.schedule = r.schedule;
                    vm.isReadOnly = null;
                    vm.schedule.jobId = null;
                    var i = r.schedule.jobType==2?0:1;
                    $('#radios :radio').removeAttr('checked')
                    $('#radios :radio').eq(i).prop('checked','checked')
                    $('#radios2 :radio').eq(0).prop('checked','checked')
                    $('#radios2 :radio').eq(1).removeAttr('checked')



                });
                //console.log(jobId,'ssssssssss')
            },
            update: function () {

                var jobId = getSelectedRow();
                if(jobId == null){
                    return ;
                }
                //console.log(jobId)
                $.get(baseURL + "sys/schedule/info/"+jobId.jobId, function(r){
                    vm.showList = 2;
                    vm.title = "修改";
                    vm.schedule = r.schedule;
                    vm.isReadOnly = "readonly";
                    var i = r.schedule.jobType==2?0:1;
                    $('#radios :radio').removeAttr('checked')
                    $('#radios :radio').eq(i).prop('checked','checked')
              });
            },
            saveOrUpdate: function (event) {
                var url = vm.schedule.jobId == null ? "baidujob/save" : "sys/schedule/update";
                var btn  = vm.$refs.schedule_submit;
                //console.log(btn);
                btn.disabled = true;
                vm.schedule.jobType = $('input[name="type"]:checked').val();
                vm.schedule.firstStart = $('input[name="start"]:checked').val()==2?true:false;
                $.ajax({
                    type: "POST",
                    url: baseURL + url,
                    contentType: "application/json",
                    data: JSON.stringify(vm.schedule),
                    success: function(r){
                        btn.disabled = false;
                        if(r.code === 0){
                            alert('操作成功', function(index){
                                vm.reload();
                            });
                        }else{
                            alert(r.msg);
                        }
                    }
                });
            },
            del: function (event) {
                var jobIds = getSelectedRows();
                if(jobIds == null){
                    return ;
                }
                var ids = [];
                jobIds.map(function (item) {
                    ids.push(item.jobId)
                });
                confirm('确定要删除选中的'+jobIds.length+'条记录？', function(){

                    if(!vm.isDel){
                        vm.isDel = true;
                        $.ajax({
                            type: "POST",
                            url: baseURL + "baidujob/delete",
                            contentType: "application/json",
                            data: JSON.stringify(ids),
                            success: function(r){
                                vm.isDel = false;
                                if(r.code == 0){
                                    alert('操作成功', function(index){
                                        vm.reload();
                                    });
                                }else{
                                    alert(r.msg);
                                }
                            }
                        });
                    }else{
                        alert("操作过于频繁!")
                    }

                });
            },
            pause: function (event) {
                var jobIds = getSelectedRows();
                if(jobIds == null){
                    return ;
                }
                console.log(jobIds);
                var ids = [];
                jobIds.map(function (item) {
                    ids.push(item.jobId)
                });
                confirm('确定要暂停选中的记录？', function(){
                    if(!vm.isDel) {
                        vm.isDel = true;
                        $.ajax({
                            type: "POST",
                            url: baseURL + "sys/schedule/pause",
                            contentType: "application/json",
                            data: JSON.stringify(ids),
                            success: function (r) {
                                vm.isDel = false;
                                if (r.code == 0) {
                                    alert('操作成功', function (index) {
                                        vm.reload();
                                    });
                                } else {
                                    alert(r.msg);
                                }
                            }
                        });
                    }else{
                        alert("操作过于频繁!")
                    }
                });
            },
            resume: function (event) {
                var jobIds = getSelectedRows();
                if(jobIds == null){
                    return ;
                }
                var ids = [];
                jobIds.map(function (item) {
                    ids.push(item.jobId)
                });
                confirm('确定要恢复选中的记录？', function(){
                    if(!vm.isDel) {
                        vm.isDel = true;
                        $.ajax({
                            type: "POST",
                            url: baseURL + "sys/schedule/resume",
                            contentType: "application/json",
                            data: JSON.stringify(ids),
                            success: function (r) {
                                vm.isDel = false;
                                if (r.code == 0) {
                                    alert('操作成功', function (index) {
                                        vm.reload();
                                    });
                                } else {
                                    alert(r.msg);
                                }
                            }
                        });
                    }else{
                        alert("操作过于频繁!")
                    }
                });
            },
            runOnce: function (event) {
                var jobIds = getSelectedRows();
                if(jobIds == null){
                    return ;
                }
                var ids = [];
                jobIds.map(function (item) {
                    ids.push(item.jobId)
                });
                confirm('确定要立即执行选中的记录？', function() {
                    if(!vm.isDel){
                        vm.isDel = true;

                        $.ajax({
                            type: "POST",
                            url: baseURL + "sys/schedule/run",
                            contentType: "application/json",
                            data: JSON.stringify(ids),
                            success: function (r) {
                                vm.isDel = false;
                                if (r.code == 0) {
                                    alert('操作成功', function (index) {
                                        vm.reload();
                                    });
                                } else {
                                    alert(r.msg);
                                }
                            }
                        });
                    }else{
                        alert("操作过于频繁!")
                    }
                });
            },
            reload: function (event) {
                vm.showList = 1;
                var opt = {
                    url: baseURL + 'baidujob/findBaiduScheduleJobPage',
                    silent: true,
                    query:{
                        limit : 10,
                        page : 0,
                        beanName:vm.q.beanName,
                        jobType:vm.nav_tabs,
                        remark:vm.q.remark
                    }
                };
               $('#bootstrap-table').bootstrapTable('refresh',
                    opt);
            },
         reloadLog:function () {
             vm.showList = 3;
             var opt = {
                 url: baseURL + 'sys/scheduleLog/jobLog',
                 silent: true,
                 query:{
                     limit : 10,
                     page : 0,
                     jobId:vm.jId
                 }
             };
             $('#bootstrap-table1').bootstrapTable('refresh',
                 opt);
         }
        }
    });

</script>
<style>
    input[type="radio"] + label::before {
        content: "\a0"; /*不换行空格*/
        display: inline-block;
        vertical-align: middle;
        font-size: 18px;
        width: 1em;
        height: 1em;
        margin-right: .4em;
        border-radius: 50%;
        border: 1px solid #1c84c6;
        text-indent: .15em;
        line-height: 1;
    }
    input[type="radio"]:checked + label::before {
        background-color: #1c84c6;
        background-clip: content-box;
        padding: .2em;
    }
    input[type="radio"] {
        position: absolute;
        clip: rect(0, 0, 0, 0);
    }
    .texts{
        white-space: normal !important;
        height:auto;
        vertical-align:text-top;
        word-break: break-all;
        white-space: pre-line !important;
        overflow: visible !important;
        padding:5px;

    }
    .selectedTr{
        background-color: #dff0d8 !important;
    }
    .selectedTr td{
        background-color: #dff0d8 !important;
    }
</style>

</body>
</html>